<html>
    <head>
        <title>状态动画与监听器</title>
    </head>
    <body>
        <script>
             // 一、状态动画与监听器
                            /*
                                通过监听器我们能监听到任何数值 property 的数值更新。
                                可能听起来很抽象，所以我们先来看看使用GreenSock的例子：

                                    gsap是一个非常流行的动画库，它提供了非常多的功能。

                                    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"><-/script>
                                    <div id="animated-number-demo">
                                        <input v-model.number="number" type="number" step="20">
                                        <p>{{ animatedNumber}}</p>
                                    </div>
                            */
                            new Vue({
                                        el:'#animated-number-demo',
                                        data:{
                                            number:0,
                                            tweenedNumber:0
                                        },
                                        computed:{
                                            animatedNumber:function(){
                                                return this.tweenedNumber.toFixed(0);
                                            }
                                        },
                                        watch:{
                                            number:function(newValue){
                                                gsap.to(this.$data,{duration:0.5,tweenedNumber:newValue});
                                            }
                                        }
                                    });

                            /*
                                当你把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，
                                比如CSS中的color的值，通过下面的例子我们通过 Tween.js  和 Color.js 实现一个例子：

                                        <script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"><-/script>
                                        <script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"><-/script>

                                        <div id="example-7">
                                            <input
                                                v-model="colorQuery"
                                                v-on:keyup.enter="updateColor"
                                                placeholder="Enter a color"
                                            >
                                            <button v-on:click="updateColor">Update</button>
                                            <p>Preview:</p>
                                            <span
                                                v-bind:style="{ backgroundColor: tweenedCSSColor }"
                                                class="example-7-color-preview"
                                            ></span>
                                            <p>{{ tweenedCSSColor }}</p>
                                        </div>
                            */ 

                            var Color = net.brehaut.Color

                            new Vue({
                                el: '#example-7',
                                data: {
                                    colorQuery: '',
                                    color: {
                                        red: 0,
                                        green: 0,
                                        blue: 0,
                                        alpha: 1
                                    },
                                    tweenedColor: {}
                                },
                                created: function () {
                                    this.tweenedColor = Object.assign({}, this.color)
                                },
                                watch: {
                                    color: function () {
                                        function animate () {
                                            if (TWEEN.update()) {
                                            requestAnimationFrame(animate)
                                            }
                                        }

                                        new TWEEN.Tween(this.tweenedColor)
                                            .to(this.color, 750)
                                            .start()

                                        animate()
                                    }
                                },
                                computed: {
                                    tweenedCSSColor: function () {
                                        return new Color({
                                            red: this.tweenedColor.red,
                                            green: this.tweenedColor.green,
                                            blue: this.tweenedColor.blue,
                                            alpha: this.tweenedColor.alpha
                                        }).toCSS()
                                    }
                                },
                                methods: {
                                    updateColor: function () {
                                        this.color = new Color(this.colorQuery).toRGB()
                                        this.colorQuery = ''
                                    }
                                }
                            })

        </script>
    </body>
</html>